<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16">
        <el-row :gutter="20" class="mgb20">
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-1">
                <i class="el-icon-user-solid grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num text">1234</div>
                  <div class="text">数据录入总数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-2">
                <i class="el-icon-message-solid grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">321</div>
                  <div class="text">数据碰撞总数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-3">
                <i class="el-icon-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">5000</div>
                  <div class="text">银行数据总数</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" :body-style="{ padding: '0px' }">
              <div class="grid-content grid-con-4">
                <i class="el-icon-goods grid-con-icon"></i>
                <div class="grid-cont-right">
                  <div class="grid-num">8400</div>
                  <div class="text">第三方数据总数</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="hover" style="height: 42vh">
              <div slot="header" class="clearfix">
                <span class="text">操作日志</span>
                <dv-decoration-2 style="width: 100%; height: 5px" />
              </div>
              <dv-scroll-board
                :config="config02"
                style="width: 100%; height: 38vh"
              />
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover" style="height: 42vh">
              <div slot="header" class="clearfix">
                <span class="text">近12个月数据处理频率</span>
                <dv-decoration-1
                  style="
                    margin-top: -10px;
                    width: 200px;
                    height: 50px;
                    float: right;
                  "
                />
              </div>
              <lineEchart></lineEchart>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" style="height: 54vh">
          <word_cloud></word_cloud>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header" class="clearfix">
            <span class="text">最近一次碰撞数据预览</span>
            <dv-decoration-2 style="width: 20%; height: 5px" />
          </div>
          <virtuallyTable
            :tableData="tableData"
            :columns="columns"
            :tableHeight="tableHeight"
          ></virtuallyTable>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import word_cloud from '@/components/echarts/word_cloud.vue'
  //import word_cloud from '@/components/echarts/word_cloud copy.vue'
  import lineEchart from '@/components/echarts/lineEchart/index.vue'
  import virtuallyTable from '@/components/public/virtuallyTable.vue'
  import Schart from 'vue-schart'
  export default {
    name: 'dashboard',
    // 局部注册的组件
    components: { word_cloud, Schart, lineEchart, virtuallyTable },
    data() {
      return {
        tableHeight: 250,
        name: localStorage.getItem('ms_username'),
        config02: {
          header: ['操作类型', '用户', '操作', '时间'],
          data: [
            ['查询操作', '管理员', '查询数据集列表', '2023-12-03 15:48:50'],
            ['增加操作', '管理员', '新增数据集', '2023-12-03 14:28:10'],
            ['修改操作', '管理员', '修改数据集名称', '2023-12-03 15:48:50'],
            ['修改操作', '管理员', '修改数据集数据', '2023-12-03 15:48:50'],
            ['删除操作', '管理员', '删除数据集数据', '2023-12-03 15:48:50'],
            ['删除操作', '管理员', '删除数据集行数据', '2023-12-03 15:48:50'],
            ['查询操作', '管理员', '查询数据集列表', '2023-12-03 15:48:50'],
            ['增加操作', '管理员', '新增数据集', '2023-12-03 14:28:10'],
            ['修改操作', '管理员', '修改数据集名称', '2023-12-03 15:48:50'],
            ['修改操作', '管理员', '修改数据集数据', '2023-12-03 15:48:50'],
            ['删除操作', '管理员', '删除数据集数据', '2023-12-03 15:48:50'],
            ['删除操作', '管理员', '删除数据集行数据', '2023-12-03 15:48:50'],
            ['查询操作', '管理员', '查询数据集列表', '2023-12-03 15:48:50'],
            ['增加操作', '管理员', '新增数据集', '2023-12-03 14:28:10'],
            ['修改操作', '管理员', '修改数据集名称', '2023-12-03 15:48:50'],
            ['修改操作', '管理员', '修改数据集数据', '2023-12-03 15:48:50'],
            ['删除操作', '管理员', '删除数据集数据', '2023-12-03 15:48:50'],
            ['删除操作', '管理员', '删除数据集行数据', '2023-12-03 15:48:50'],
          ],
          rowNum: 10,
          columnWidth: [120, 120],
          headerBGC: '#00ffff5e',
          oddRowBGC: '#2d8cf04a',
          evenRowBGC: '#00083e4a',
        },
        tableData: [
          {
            filed0: '谢启昭 危险驾驶、变造身份证件案',
            filed1: '谢启昭',
            filed2: '2018-01-04',
            filed3: '2018-02-05',
            filed4: '',
            filed5: '2018-03-24',
            filed6: '',
            filed7: '410928196308040076',
            id: 1,
          },
          {
            filed0: '刘洪昌 危险驾驶案',
            filed1: '刘洪昌',
            filed2: '2018-01-10',
            filed3: '2018-02-05',
            filed4: '',
            filed5: '2018-03-11',
            filed6: '',
            filed7: '410928198710170134',
            id: 2,
          },
          {
            filed0: '李迎军 危险驾驶案',
            filed1: '李迎军',
            filed2: '2018-01-10',
            filed3: '2018-02-09',
            filed4: '',
            filed5: '2018-03-26',
            filed6: '',
            filed7: '410928196905290030',
            id: 3,
          },
          {
            filed0: '张海波 危险驾驶案',
            filed1: '张海波',
            filed2: '2018-01-16',
            filed3: '2018-01-25',
            filed4: '',
            filed5: '2018-02-19',
            filed6: '',
            filed7: '410901198008241553',
            id: 4,
          },
          {
            filed0: '崔学军 危险驾驶案',
            filed1: '崔学军',
            filed2: '2018-01-16',
            filed3: '2018-04-20',
            filed4: '',
            filed5: '',
            filed6: '',
            filed7: '41092819740902001X',
            id: 5,
          },
          {
            filed0: '张文峰 危险驾驶案',
            filed1: '张文峰',
            filed2: '2018-01-17',
            filed3: '2018-01-29',
            filed4: '',
            filed5: '2018-02-18',
            filed6: '',
            filed7: '410928197610273019',
            id: 6,
          },
          {
            filed0: '宋省 危险驾驶案',
            filed1: '宋省',
            filed2: '2018-01-17',
            filed3: '2018-02-05',
            filed4: '',
            filed5: '',
            filed6: '',
            filed7: '410928198908222710',
            id: 7,
          },
          {
            filed0: '吉肇波 危险驾驶案',
            filed1: '吉肇波',
            filed2: '2018-01-18',
            filed3: '2018-02-05',
            filed4: '',
            filed5: '',
            filed6: '',
            filed7: '410928197309101410',
            id: 8,
          },
          {
            filed0: '吕永宝 危险驾驶案',
            filed1: '吕永宝',
            filed2: '2018-01-18',
            filed3: '2018-01-19',
            filed4: '',
            filed5: '2018-02-12',
            filed6: '',
            filed7: '410901198501150639',
            id: 9,
          },
          {
            filed0: '徐大鹏 危险驾驶案',
            filed1: '徐大鹏',
            filed2: '2018-01-18',
            filed3: '2018-01-29',
            filed4: '',
            filed5: '2018-02-19',
            filed6: '',
            filed7: '410901198304080037',
            id: 10,
          },
          {
            filed0: '李文方 危险驾驶案',
            filed1: '李文方',
            filed2: '2018-01-23',
            filed3: '2018-01-26',
            filed4: '',
            filed5: '2018-02-13',
            filed6: '',
            filed7: '410928198802156313',
            id: 11,
          },
          {
            filed0: '崔武访 危险驾驶案',
            filed1: '崔武访',
            filed2: '2018-01-25',
            filed3: '2018-02-08',
            filed4: '',
            filed5: '2018-03-09',
            filed6: '',
            filed7: '410901198612081576',
            id: 12,
          },
          {
            filed0: '杨文杰 危险驾驶案',
            filed1: '杨文杰',
            filed2: '2018-01-25',
            filed3: '2018-02-05',
            filed4: '',
            filed5: '2018-03-11',
            filed6: '',
            filed7: '410928198510255010',
            id: 13,
          },
          {
            filed0: '李志彬 危险驾驶案',
            filed1: '李志彬',
            filed2: '2018-01-29',
            filed3: '2018-02-23',
            filed4: '',
            filed5: '2018-03-27',
            filed6: '',
            filed7: '410928197205181532',
            id: 14,
          },
          {
            filed0: '王娃子危险驾驶案',
            filed1: '王娃子',
            filed2: '2018-01-31',
            filed3: '2018-02-23',
            filed4: '',
            filed5: '2018-03-13',
            filed6: '',
            filed7: '41282519871110411x',
            id: 15,
          },
          {
            filed0: '王尚省 危险驾驶案',
            filed1: '王尚省',
            filed2: '2018-02-24',
            filed3: '2018-03-12',
            filed4: '',
            filed5: '2018-04-10',
            filed6: '',
            filed7: '410928197611012750',
            id: 16,
          },
          {
            filed0: '梅兴濮 危险驾驶案',
            filed1: '梅兴濮',
            filed2: '2018-02-24',
            filed3: '2018-02-27',
            filed4: '',
            filed5: '2018-03-27',
            filed6: '',
            filed7: '410928198410060013',
            id: 17,
          },
          {
            filed0: '李洪营 危险驾驶案',
            filed1: '李洪营',
            filed2: '2018-02-27',
            filed3: '2018-03-05',
            filed4: '',
            filed5: '2018-03-27',
            filed6: '',
            filed7: '410928198302172114',
            id: 18,
          },
          {
            filed0: '田宗君  危险驾驶案',
            filed1: '田宗君',
            filed2: '2018-02-28',
            filed3: '2018-03-15',
            filed4: '',
            filed5: '',
            filed6: '',
            filed7: '41092819670314481X',
            id: 19,
          },
          {
            filed0: '马亚川 危险驾驶案',
            filed1: '马亚川',
            filed2: '2018-03-07',
            filed3: '2018-03-15',
            filed4: '',
            filed5: '',
            filed6: '',
            filed7: '410928199011193630',
            id: 20,
          },
          {
            filed0: '王多文 危险驾驶案',
            filed1: '王多文',
            filed2: '2018-03-07',
            filed3: '2018-03-23',
            filed4: '',
            filed5: '2018-04-27',
            filed6: '',
            filed7: '410901198907011559',
            id: 21,
          },
          {
            filed0: '陈时先 危险驾驶案',
            filed1: '陈时先',
            filed2: '2018-03-07',
            filed3: '2018-03-15',
            filed4: '',
            filed5: '2018-04-10',
            filed6: '',
            filed7: '410928198804170039',
            id: 22,
          },
          {
            filed0: '王学甫 危险驾驶案',
            filed1: '王学甫',
            filed2: '2018-03-07',
            filed3: '2018-03-13',
            filed4: '',
            filed5: '2018-04-06',
            filed6: '',
            filed7: '410928198011300059',
            id: 23,
          },
          {
            filed0: '陈军民 危险驾驶案',
            filed1: '陈军民',
            filed2: '2018-03-07',
            filed3: '2018-03-30',
            filed4: '',
            filed5: '2018-04-27',
            filed6: '',
            filed7: '410928197201023617',
            id: 24,
          },
          {
            filed0: '高胜宇 危险驾驶案',
            filed1: '高胜宇',
            filed2: '2018-03-07',
            filed3: '2018-03-15',
            filed4: '',
            filed5: '2018-04-09',
            filed6: '',
            filed7: '410928199202065738',
            id: 25,
          },
          {
            filed0: '谭全立 危险驾驶、使用虚假身份证件案',
            filed1: '谭全立',
            filed2: '2018-03-07',
            filed3: '2018-04-04',
            filed4: '',
            filed5: '2018-04-30',
            filed6: '',
            filed7: '410928197201083935',
            id: 26,
          },
          {
            filed0: '常航航 危险驾驶案',
            filed1: '常航航',
            filed2: '2018-03-09',
            filed3: '2018-03-15',
            filed4: '',
            filed5: '2018-04-09',
            filed6: '',
            filed7: '410928199509183018',
            id: 27,
          },
          {
            filed0: '马百利 危险驾驶案',
            filed1: '马百利',
            filed2: '2018-03-09',
            filed3: '2018-03-21',
            filed4: '',
            filed5: '2018-04-10',
            filed6: '',
            filed7: '410928199211163356',
            id: 28,
          },
          {
            filed0: '张兆齐 危险驾驶案',
            filed1: '张兆齐',
            filed2: '2018-03-09',
            filed3: '2018-03-22',
            filed4: '',
            filed5: '2018-04-10',
            filed6: '',
            filed7: '410928199802045415',
            id: 29,
          },
          {
            filed0: '杨兰坤 危险驾驶案',
            filed1: '杨兰坤',
            filed2: '2018-03-09',
            filed3: '2018-03-21',
            filed4: '',
            filed5: '',
            filed6: '',
            filed7: '410928196709104253',
            id: 30,
          },
          {
            filed0: '孙志兵 危险驾驶案',
            filed1: '孙志兵',
            filed2: '2018-03-09',
            filed3: '2018-03-15',
            filed4: '',
            filed5: '2018-04-03',
            filed6: '',
            filed7: '410928198204244217',
            id: 31,
          },
          {
            filed0: '刘贵仓危险驾驶案',
            filed1: '刘贵仓',
            filed2: '2018-03-12',
            filed3: '2018-03-15',
            filed4: '',
            filed5: '2018-04-06',
            filed6: '',
            filed7: '410928197710296613',
            id: 32,
          },
          {
            filed0: '刘社普 危险驾驶案',
            filed1: '刘社普',
            filed2: '2018-03-12',
            filed3: '2018-04-11',
            filed4: '',
            filed5: '2018-05-06',
            filed6: '',
            filed7: '410928197409142711',
            id: 33,
          },
          {
            filed0: '张国立 危险驾驶案',
            filed1: '张国立',
            filed2: '2018-03-13',
            filed3: '2018-03-21',
            filed4: '',
            filed5: '',
            filed6: '',
            filed7: '410928198611125135',
            id: 34,
          },
          {
            filed0: '张少杰 危险驾驶案',
            filed1: '张少杰',
            filed2: '2018-03-13',
            filed3: '2018-04-11',
            filed4: '',
            filed5: '2018-05-06',
            filed6: '',
            filed7: '410928198812105456',
            id: 35,
          },
          {
            filed0: '王继勇 危险驾驶案',
            filed1: '王继勇',
            filed2: '2018-03-13',
            filed3: '2018-03-27',
            filed4: '',
            filed5: '2018-05-03',
            filed6: '',
            filed7: '410928197510130053',
            id: 36,
          },
          {
            filed0: '董战鹤 危险驾驶案',
            filed1: '董战鹤',
            filed2: '2018-03-14',
            filed3: '2018-04-13',
            filed4: '',
            filed5: '2018-05-06',
            filed6: '',
            filed7: '410928198307023011',
            id: 37,
          },
          {
            filed0: '王洪雨 危险驾驶案',
            filed1: '王洪雨',
            filed2: '2018-03-14',
            filed3: '2018-04-12',
            filed4: '',
            filed5: '2018-05-08',
            filed6: '',
            filed7: '410928197804156371',
            id: 38,
          },
          {
            filed0: '陈太行 危险驾驶案',
            filed1: '陈太行',
            filed2: '2018-03-15',
            filed3: '2018-03-21',
            filed4: '',
            filed5: '2018-04-09',
            filed6: '',
            filed7: '410901198709121511',
            id: 39,
          },
          {
            filed0: '苏中效涉嫌危险驾驶案',
            filed1: '苏中效',
            filed2: '2018-03-15',
            filed3: '2018-04-03',
            filed4: '',
            filed5: '2018-04-28',
            filed6: '',
            filed7: '410928198902043615',
            id: 40,
          },
          {
            filed0: '孙新民 危险驾驶案',
            filed1: '孙新民',
            filed2: '2018-03-20',
            filed3: '2018-03-30',
            filed4: '',
            filed5: '2018-04-28',
            filed6: '',
            filed7: '410928196707073959',
            id: 41,
          },
          {
            filed0: '吴晓康 危险驾驶案',
            filed1: '吴晓康',
            filed2: '2018-03-20',
            filed3: '2018-04-10',
            filed4: '',
            filed5: '2018-05-04',
            filed6: '',
            filed7: '410928199310016351',
            id: 42,
          },
          {
            filed0: '贾纪锋 危险驾驶案',
            filed1: '贾纪锋',
            filed2: '2018-03-21',
            filed3: '2018-03-26',
            filed4: '',
            filed5: '2018-04-28',
            filed6: '',
            filed7: '410928197509112413',
            id: 43,
          },
          {
            filed0: '丁纪生 危险驾驶案',
            filed1: '丁纪生',
            filed2: '2018-03-21',
            filed3: '2018-03-30',
            filed4: '',
            filed5: '2018-04-27',
            filed6: '',
            filed7: '410928197507156375',
            id: 44,
          },
          {
            filed0: '王子威 危险驾驶案',
            filed1: '王子威',
            filed2: '2018-03-22',
            filed3: '2018-04-18',
            filed4: '',
            filed5: '2018-05-09',
            filed6: '',
            filed7: '410928199211056059',
            id: 45,
          },
          {
            filed0: '肖培真 危险驾驶案',
            filed1: '肖培真',
            filed2: '2018-03-22',
            filed3: '2018-03-27',
            filed4: '',
            filed5: '2018-04-27',
            filed6: '',
            filed7: '410928198806220933',
            id: 46,
          },
          {
            filed0: '吴军伟 危险驾驶案',
            filed1: '吴军伟',
            filed2: '2018-03-22',
            filed3: '2018-03-30',
            filed4: '',
            filed5: '2018-04-28',
            filed6: '',
            filed7: '41052619840226349X',
            id: 47,
          },
          {
            filed0: '王红凯 危险驾驶案',
            filed1: '王红凯',
            filed2: '2018-03-22',
            filed3: '2018-04-18',
            filed4: '',
            filed5: '2018-05-14',
            filed6: '',
            filed7: '410928199004154019',
            id: 48,
          },
          {
            filed0: '李石科 危险驾驶案',
            filed1: '李石科',
            filed2: '2018-03-22',
            filed3: '2018-03-30',
            filed4: '',
            filed5: '2018-05-01',
            filed6: '',
            filed7: '410928197302014138',
            id: 49,
          },
          {
            filed0: '李孝会 危险驾驶案',
            filed1: '李孝会',
            filed2: '2018-03-22',
            filed3: '2018-03-29',
            filed4: '',
            filed5: '2018-05-01',
            filed6: '',
            filed7: '410928198104062272',
            id: 50,
          },
          {
            filed0: '朱少勇 危险驾驶案',
            filed1: '朱少勇',
            filed2: '2018-03-23',
            filed3: '2018-03-30',
            filed4: '',
            filed5: '2018-05-13',
            filed6: '',
            filed7: '410901197604024016',
            id: 51,
          },
        ],
        columns: [
          {
            id: 650,
            columnEnName: 'filed0',
            columnCnName: '案件名称',
            columnCnType: '文本',
            sort: 0,
            importId: 34,
            createTime: '2023-12-03 15:42:12',
          },
          {
            id: 651,
            columnEnName: 'filed1',
            columnCnName: '嫌疑人姓名',
            columnCnType: '文本',
            sort: 1,
            importId: 34,
            createTime: '2023-12-03 15:42:12',
          },
          {
            id: 652,
            columnEnName: 'filed2',
            columnCnName: '全案_受理日期',
            columnCnType: '文本',
            sort: 2,
            importId: 34,
            createTime: '2023-12-03 15:42:12',
          },
          {
            id: 653,
            columnEnName: 'filed3',
            columnCnName: '全案_审结日期',
            columnCnType: '文本',
            sort: 3,
            importId: 34,
            createTime: '2023-12-03 15:42:12',
          },
          {
            id: 654,
            columnEnName: 'filed4',
            columnCnName: '上诉日期',
            columnCnType: '文本',
            sort: 4,
            importId: 34,
            createTime: '2023-12-03 15:42:12',
          },
          {
            id: 655,
            columnEnName: 'filed5',
            columnCnName: '一审判决生效日期',
            columnCnType: '文本',
            sort: 5,
            importId: 34,
            createTime: '2023-12-03 15:42:12',
          },
          {
            id: 656,
            columnEnName: 'filed6',
            columnCnName: '二审裁判文书收到日期',
            columnCnType: '文本',
            sort: 6,
            importId: 34,
            createTime: '2023-12-03 15:42:12',
          },
          {
            id: 657,
            columnEnName: 'filed7',
            columnCnName: '证件号码',
            columnCnType: '文本',
            sort: 7,
            importId: 34,
            createTime: '2023-12-03 15:42:12',
          },
        ],
      }
    },

    computed: {},
    methods: {
      changeDate() {
        const now = new Date().getTime()
        this.data.forEach((item, index) => {
          const date = new Date(now - (6 - index) * 86400000)
          item.name = `${date.getFullYear()}/${
            date.getMonth() + 1
          }/${date.getDate()}`
        })
      },
    },
  }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }

  .grid-content {
    display: flex;
    align-items: center;
    height: 100px;
  }

  .grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
  }

  .grid-num {
    font-size: 30px;
    font-weight: bold;
  }

  .grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
  }

  .grid-con-1 .grid-con-icon {
    background: #176cc7a4;
  }

  .grid-con-1 .grid-num {
    color: rgb(8, 96, 191);
    text-shadow: 0 0 3px rgb(49, 148, 253);
  }

  .grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114, 0.5);
  }

  .grid-con-2 .grid-num {
    color: rgb(59, 255, 66);
    text-shadow: 0 0 3px rgb(27, 238, 34);
  }

  .grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67, 0.5);
  }

  .grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
    text-shadow: 0 0 3px rgb(255, 67, 34);
  }

  .grid-con-4 .grid-con-icon {
    background: rgb(242, 242, 67, 0.5);
  }

  .grid-con-4 .grid-num {
    color: rgb(242, 242, 67);
    text-shadow: 0 0 3px rgb(247, 247, 54);
  }

  .user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
  }

  .user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }

  .user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
  }

  .user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
  }

  .user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
  }

  .user-info-list span {
    margin-left: 70px;
  }

  .mgb20 {
    margin-bottom: 20px;
  }

  .todo-item {
    font-size: 14px;
  }

  .todo-item-del {
    text-decoration: line-through;
    color: #999;
  }
  .text {
    color: #0000ff;
    font-weight: 700;
  }
</style>
<style lang="less" scoped>
  /deep/ .el-card {
    border: 1px solid #00ffff80;
    background-color: #409eff33;
  }
  /deep/ .el-card__header {
    border-bottom: 1px solid #00ffff80;
  }
  /deep/ .el-progress__text {
    color: #00ffff;
    font-weight: 500;
  }
</style>
